<template>
  <el-dialog :modal-append-to-body="false" :visible.sync="dialogVisible" width="500px" v-loading="loadingVisible" @open="handleDialogOpen()">
    <div slot="title" class="dialog-header"><h3>编辑群名称</h3></div>
    <el-form class="el-dialog-form" ref="form" :model="model" :rules="formRules" 
      label-width="80px" label-position="right" size="small">
      <el-form-item label="群名称" prop="groupName">
        <el-col :span="16"><el-input ref="groupName" :maxlength="32" v-model="model.groupName"></el-input></el-col>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" size="small" :disabled="!saveButtonEnable" @click="doSaveGroupName()">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { updateGroupName } from '@/api/channel'
import { mapGetters } from 'vuex'

export default {
  name: 'edit-channel-name', 
  data() {
    return {
      loadingVisible: false,
      dialogVisible: false,
      oldGroupName: '',
      model: {
        groupId: '',
        groupName: ''
      },
      formRules: {
        groupName: [
          { required: true, message: '请输入频道名称', trigger: 'blur' },
          { min: 3, max: 32, message: '长度在 3 到 32 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleDialogOpen() {
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
        this.$refs['groupName'].focus()
      })        
    },
    doSaveGroupName() {
      this.$refs['form'].validate(valid => {
        if (valid) { 
          this.dialogVisible=false;
          this.$emit("saveGroupName",this.model);
        } else {
          return false
        }
      })
    }
  },
  computed: {
    
	    ...mapGetters([
	      'userInfo','token'
	    ]),
    saveButtonEnable() {
      return this.oldGroupName !== this.model.groupName && this.model.groupName !== ''
    }
  },
  mounted: function() {
    this.$nextTick(() => {  
      this.$on('openDialog', function(group) {
        this.model.groupId = group.groupId
        this.oldGroupName =group.groupName
        this.model.groupName = group.groupName
        this.dialogVisible = true
      })
    })
  }  
}
</script>

